<template>
    <page-main class="revise-password">
        <div class="revise-password-list">
            <div class="item">
                <div class="content">
                    <div class="title">账户密码</div>
                    <div class="desc">当前密码强度：强</div>
                </div>
                <div class="action">
                    <el-button type="text" @click="editPassword">修改</el-button>
                </div>
            </div>
            <div class="item">
                <div class="content">
                    <div class="title">密保手机</div>
                    <div class="desc">已绑定手机：187****3441</div>
                </div>
                <div class="action">
                    <el-button type="text">修改</el-button>
                </div>
            </div>
            <div class="item">
                <div class="content">
                    <div class="title">备用邮箱</div>
                    <div class="desc">当前未绑定备用邮箱</div>
                </div>
                <div class="action">
                    <el-button type="text">绑定</el-button>
                </div>
            </div>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
export default {
    name: 'RevisePwd',
    components: {PageMain},
    methods: {
        editPassword() {
            this.$router.push({
                name: 'personalEditPassword'
            })
        },
    }
}
</script>

<style scoped lang="scss">
.revise-password {
    .revise-password-list {
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8e8;
            .content {
                .title {
                    margin-bottom: 5px;
                    color: #666;
                }
                .desc {
                    font-size: 14px;
                    color: #999;
                }
            }
            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>
